<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <title>demo1.html</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        nav {
            height: 120px;

        }

        #header {
            width: 100%;
            height: 100px;
            background-color: #ff0000;
            position: sticky;
            top: 0;
        }

        main {
            height: 1000px;
        }

        #backTop {
            position: fixed;
            right: 10px;
            bottom: 10px;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        label {
            width: max-content;
            border: 1px solid #505050;
            user-select: none;
        }

        input {
            width: max-content;
            border: none;
            outline: none;
        }

        li {
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
<nav></nav>
<header id="header"></header>
<main>

    <form action="">
        <label for="password">
            <input placeholder="请输入密码." id="password" type="password" name="password">
            <span id="showPwd">👁️</span>
        </label>
        <input type="submit" value="提交">
    </form>

    <ul>
        <li>
            <input name="checkTest" onclick="check(this,this.dataset.index)" data-index="0" type="checkbox">全选
        </li>
        <li>
            <input name="checkTest" onclick="check(this,this.dataset.index)" data-index="1" type="checkbox">test
        </li>
        <li>
            <input name="checkTest" onclick="check(this,this.dataset.index)" data-index="2" type="checkbox">test
        </li>
        <li>
            <input name="checkTest" onclick="check(this,this.dataset.index)" data-index="3" type="checkbox">test
        </li>
        <li>
            <input name="checkTest" onclick="check(this,this.dataset.index)" data-index="4" type="checkbox">test
        </li>
        <li>
            <input name="checkTest" onclick="check(this,this.dataset.index)" data-index="5" type="checkbox">test
        </li>
    </ul>
</main>
<div id="backTop">
    <button>回到顶部</button>
</div>
<script>
    const header = document.getElementById('header')
    const backTop = document.querySelector('#backTop > button')

    backTop.onclick = () => {
        document.documentElement.scrollTop = 0
    }
    const password = document.getElementById('password')
    const showPwd = document.getElementById('showPwd')
    showPwd.onclick = () => {
        if (password.type === 'password') {
            password.type = 'text'
            setTimeout(() => {
                showPwd.innerHTML = '👁️'
                password.type = 'password'
            }, 3000)
        } else {
            password.type = 'password'
            showPwd.innerHTML = '👁️'
        }
    }

    const checkTest = document.querySelectorAll('input[type="checkbox"][name="checkTest"]')


    function check(c, index) {
        if (index !== '0') {

            let num = 0
            for (let i = 1; i < checkTest.length; i++) {
                if (checkTest[i].checked === true)
                    num++
                console.log(num)
            }
            checkTest[0].checked = num === checkTest.length - 1;
        } else
            checkTest.forEach((e) => e.checked = checkTest[0].checked === true)
    }

</script>

</body>
</html>